<template>
	<div class="pie-chart-box">
		<div id="pieChart3"></div>
		<div class="textColor">
			<span>管理费用率</span>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";

let rate = ref(0);
let dataArr = ref([
	{
		value: rate.value,
		itemStyle: {
			color: {
				x: 0, //右
				y: 1, //下
				x2: 1, //左
				y2: 0, //上
				colorStops: [
					{
						offset: 0,
						color: "rgba(0, 213, 255, 1)",
					},
					{
						offset: 0.5,
						color: "rgba(47, 150, 255, 1)",
					},
					{
						offset: 1,
						color: "rgba(25, 120, 229, 1)",
					},
				],
			},
		},
	},
	{
		value: 100 - rate.value,
		itemStyle: {
			color: "transparent",
		},
	},
]);
let options = reactive({
	series: [
		{
			type: "pie",
			data: dataArr.value,
			center: ["50%", "55%"],
			radius: ["60%", "70%"],
			label: {
				show: true,
				position: "center",
				color: "#D8F0FF",
				formatter: (params) => {
					return rate.value + "%";
				},
			},
			labelLine: {
				show: false,
			},
			clockwise: false,
			emphasis: {
				disabled: true,
			},
		},
		{
			type: "pie",
			data: dataArr.value,
			center: ["50%", "55%"],
			radius: ["75%", "75%"],
			label: {
				show: false,
			},
			labelLine: {
				show: false,
			},
			clockwise: false,
			emphasis: {
				disabled: true,
			},
			itemStyle: {
				borderWidth: 1,
				borderColor: "#242A37",
			},
		},
	],
});
let pieChartRef = null;
let initPieChartData = (v) => {
	rate.value = Math.round(100 * v);
	dataArr.value[0].value = rate.value;
	dataArr.value[1].value = rate.value < 100 ? 100 - rate.value : 0;
	pieChartRef.setOption(options);
};
const initPieChart = (v) => {
	if (!pieChartRef)
		pieChartRef = echarts.init(document.getElementById("pieChart3"));
	initPieChartData(v);
};
defineExpose({
	initPieChart,
});
</script>

<style lang="scss" scoped>
.pie-chart-box {
	width: 100%;
	height: 100%;
	#pieChart3 {
		width: 100%;
		height: 88%;
	}
	.textColor {
		font-size: 14px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #d3e3ff;
		line-height: 21px;
		text-align: center;
	}
}
</style>
